<template>
  <CustomDialog :drag-dialog="dialogInfo" style="z-index: 1201">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :disabled="true"
      size="mini"
      label-width="160px"
    >
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="组织机构" prop="busMainData.sysOrgCode">
            <OrgsetTreeSelect
              v-model="form.busMainData.sysOrgCode"
              :editable="
                form.busPageInfo.editable &&
                form.busMainData.funProcess === '10'
              "
              :has-priv="true"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="证书编号" prop="busMainData.cerCode">
            <el-input v-model="form.busMainData.cerCode" />
          </el-form-item>
          <el-form-item label="客户名称" prop="busMainData.name">
            <el-input v-model="form.busMainData.name" />
          </el-form-item>
          <el-form-item label="客户等级" prop="busMainData.customLevel">
            <el-select
              v-model="form.busMainData.customLevel"
              filterable
              clearable
              placeholder="客户等级"
            >
              <el-option
                v-for="item in dicts.custom_level"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="线索来源" prop="busMainData.sourceType">
            <el-select
              v-model="form.busMainData.sourceType"
              filterable
              clearable
              placeholder="线索来源"
            >
              <el-option
                v-for="item in dicts.custom_source_type"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户行业" prop="busMainData.customTrade">
            <el-select
              v-model="form.busMainData.customTrade"
              filterable
              clearable
              placeholder="线索来源"
            >
              <el-option
                v-for="item in dicts.custom_trade"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属城市"
            prop="busMainData.cityId"
            style="width: 600px"
          >
            <CityCascaderSelect v-model="cityId" style="width: 600px" />
          </el-form-item>
          <el-form-item label="地址" prop="busMainData.address">
            <template slot="label">
              地址<IconHelp display-content="请输入相应街道." />
            </template>
            <el-input v-model="form.busMainData.address" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机" prop="busMainData.phone">
            <el-input v-model="form.busMainData.phone" />
          </el-form-item>
          <el-form-item label="电话" prop="busMainData.tel">
            <el-input v-model="form.busMainData.tel" />
          </el-form-item>
          <el-form-item label="邮件 " prop="busMainData.email">
            <el-input v-model="form.busMainData.email" />
          </el-form-item>
          <el-form-item label="公司网址" prop="busMainData.url">
            <el-input v-model="form.busMainData.url" />
          </el-form-item>
          <el-form-item label="下次联系时间" prop="busMainData.nextContactTime">
            <el-date-picker
              v-model="form.busMainData.nextContactTime"
              placeholder="下次联系时间"
              type="datetime"
              size="mini"
              clearable
              style="width: 200px"
              class="filter-item"
            />
          </el-form-item>
          <el-form-item label="负责人" prop="busMainData.chargerName">
            <el-input :disabled="true" v-model="form.busMainData.chargerName" />
          </el-form-item>
          <el-form-item label="最后跟进时间" prop="busMainData.lastFollowDate">
            <el-date-picker
              v-model="form.busMainData.lastFollowDate"
              placeholder="最后跟进时间"
              type="datetime"
              size="mini"
              disabled
              readonly
              class="filter-item"
            />
          </el-form-item>
          <el-form-item label="是否成交" prop="busMainData.dealFlag">
            <el-radio
              v-for="item in dicts.enable_flag"
              :key="item.id"
              v-model="form.busMainData.dealFlag"
              :disabled="true"
              :label="item.dictCode"
              >{{ item.dictName }}</el-radio
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeTab">
      <el-tab-pane name="followTab" label="跟进活动">
        <follow-index ref="followIndex" />
      </el-tab-pane>
      <el-tab-pane name="contactTab" label="联系人">
        <contact-index ref="contactIndex" />
      </el-tab-pane>
      <el-tab-pane name="detailmemberTab" label="团队成员">
        <detailmember-index ref="detailmemberIndex" />
      </el-tab-pane>
      <el-tab-pane name="businessstageTab" label="商机阶段">
        <businessstage-index ref="businessstageIndex" />
      </el-tab-pane>
      <el-tab-pane name="taskTab" label="任务管理">
        <task-index ref="taskIndex" />
      </el-tab-pane>
    </el-tabs>
  </CustomDialog>
</template>

<script>
import custom from "@/api/crm/Custom";
import { isvalidPhone } from "@/utils/validate";
import CityCascaderSelect from "@/views/components/CityCascaderSelect";
import OrgsetTreeSelect from "@/views/components/OrgsetTreeSelect";
import followIndex from "@/views/crm/follow/index";
import contactIndex from "@/views/crm/contact/index";
import detailmemberIndex from "@/views/crm/detailmember/index";
import businessstageIndex from "@/views/crm/businessstage/index";
import taskIndex from "@/views/crm/task/index";

export default {
  components: {
    CityCascaderSelect,
    OrgsetTreeSelect,
    followIndex,
    contactIndex,
    detailmemberIndex,
    businessstageIndex,
    taskIndex,
  },
  dictTypes: [
    "custom_level",
    "custom_source_type",
    "custom_trade",
    "enable_flag",
  ],
  props: {
    sup_this: {
      type: Object,
      required: true,
    },
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      isAdd: false,
      loading: false,
      activeTab: "followTab",
      style: "width: 184px",
      dialogInfo: {
        name: "customMngFormDetailDialog",
        title: "客户管理",
        fullScreen: true,
        width: 80,
        height: 90,
      },
      form: {
        busMainData: {
          id: "",
          enableFlag: "Y",
          cityId: null,
        },
        busPageInfo: {
          editable: false,
        },
      },
      rules: {
        "busMainData.cerCode": [
          { required: true, message: "请输入证书编号", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        "busMainData.name": [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100 个字符",
            trigger: "blur",
          },
        ],
        "busMainData.sourceType": [
          { required: true, message: "请选择来源", trigger: "blur" },
        ],
        // 'busMainData.phone': [
        //   { required: true, trigger: 'blur', validator: validPhone }
        // ],
        "busMainData.customLevel": [
          { required: true, message: "请选择客户等级", trigger: "blur" },
        ],
        "busMainData.customTrade": [
          { required: true, message: "请选择客户行业", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    cityId: {
      get() {
        if (
          this.form.busMainData.cityId &&
          typeof this.form.busMainData.cityId === "string"
        ) {
          return JSON.parse(this.form.busMainData.cityId);
        }
        return this.form.busMainData.cityId;
      },
      set(val) {
        this.form.busMainData.cityId = val;
      },
    },
  },
  methods: {
    cancel() {
      this.resetForm();
    },
    initDataOfBefore() {},
    displayDialog() {
      const { name } = this.dialogInfo;
      this.$nextTick(() => {
        this.$modal.show(name);
      });
    },
    hiddenDialog() {
      const { name } = this.dialogInfo;
      this.$nextTick(() => {
        this.$modal.hide(name);
      });
    },
    addData() {
      this.isAdd = true;
      const data = { paramBean: {} };
      custom
        .toAdd(data)
        .then((res) => {
          this.displayDialog();
          this.form = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    copyData(mainId) {
      this.isAdd = true;
      const data = { paramBean: { id: mainId } };
      custom
        .toCopy(data)
        .then((res) => {
          this.displayDialog();
          this.form = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    viewMainData(id) {
      this.isAdd = false;
      const _this = this;
      const data = { paramBean: { id: id } };
      custom.viewMainData(data).then((res) => {
        _this.displayDialog();
        _this.form = res.data;
        setTimeout(() => {
          _this.loadDetailTab();
        }, 200);
      });
    },
    resetForm() {
      this.hiddenDialog();
      this.$refs["form"].resetFields();
    },
    loadDetailTab() {
      const _this = this;
      _this.$refs["followIndex"].initLoadDataByCode(_this.form.busMainData);
      _this.$refs["contactIndex"].initLoadDataByCode(_this.form.busMainData);
      _this.$refs["detailmemberIndex"].initLoadDataByCode(
        _this.form.busMainData
      );
      _this.$refs["businessstageIndex"].initLoadDataByCode(
        _this.form.busMainData
      );
      _this.$refs["taskIndex"].initLoadDataByCode(_this.form.busMainData);
    },
  },
};
</script>
